<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="12">
          <el-form-item label-width="120px" label="变更认证类型" prop="type">
            <el-radio-group v-model="formData.type" size="small">
              <el-radio :key="1" :label="1" v-has-role="['special']"
                        border class="radio">变更为企业主体（原个人实名认证的主体变更为企业主体，账号和资源的归属主体发生变更）
              </el-radio>
              <el-radio :key="2" :label="2" v-has-role="['storeManager','driver','salesman','common']"
                        border class="radio">变更为个人主体（原个人实名认证的主体变更为其他个人主体，账号和资源的归属主体发生变更）
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button @click="lastStep" >上一步</el-button>
            <el-button @click="submitForm" type="primary"> 下一步</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        type: '',
      },
      rules: {
        type: [{
          required: true,
          message: '变更认证类型不能为空',
          trigger: 'change'
        }],
      },
      typeOptions: [{
        "label": "变更为企业主体（原个人实名认证的主体变更为企业主体，\n" +
            "账号和资源的归属主体发生变更）",
        "value": 1
      }, {
        "label": "变更为个人主体（原个人实名认证的主体变更为其他个人主体，\n" +
            "账号和资源的归属主体发生变更）",
        "value": 2
      }],
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        this.$emit('chose', this.formData.type)
      })
    },
    lastStep() {
      this.$emit('lastStep')
    },
  }
}

</script>
<style>
.radio {
  display: block;
  margin-bottom: 10px;
  margin-left: 0 !important;
}
</style>
